<template>
  <div class="baseinfo">
      <MyHeader />
      <div class="titleBg">
          变更前的住所信息
      </div>
      <table class="tbstyle" width="100%">
          <tr>
              <td class="tbstyle_left" style="width:140px;">住所(经营场所)</td>
              <td>北京市海淀区苏州街36号</td>
          </tr> 
      </table>  
      <div class="titleBg">
          变更后的住所信息
      </div>
      <Form class="baseinfo_form"  label-position="left"  ref="entForm" :model="entForm" >
      <FormItem class="baseinfo_select" style="border-top: 1px solid #BFE5F5;" label="营业期限" :label-width="140" prop='tradeterm' :rules="validator.must">
        <Select v-model="entForm.tradeterm" placeholder="营业期限">
          <Option value="5">5年</Option>
          <Option value="10">10年</Option>
          <Option value="20">20年</Option>
          <Option value="30">30年</Option>
          <Option  value="-1">长期</Option>
        </Select>
      </FormItem>
      <FormItem :label="dombase" :label-width="140" prop='domother' :rules="validator.address">
        <Input v-model="entForm.domother" type="text" placeholder="住所(经营场所)" @on-blur="domotherEdit()" :maxlength="30"></Input>
      </FormItem>
    </Form>
      <Form class="baseinfo_form"   label-position="left"  ref="entSupForm" :model="entSupForm">
      <FormItem :label="dombase" :label-width="140" prop='prolocother' :rules="validator.address" >
        <Input v-model="entSupForm.prolocother" type="text" placeholder="生产经营地" :maxlength="30"></Input>
      </FormItem>
      <div class="baseinfo_space"></div>
      <FormItem label="住所(产权人)" style="border-top: 1px solid #BFE5F5;" :label-width="140" prop='domowner' :rules="validator.chinese"  :show-message="false">
        <Input v-model="entSupForm.domowner" type="text" placeholder="住所(产权人)" :maxlength="50"></Input>
      </FormItem>
      <FormItem class="baseinfo_select" label="住所产权类型" :label-width="140" prop='domownertype' :rules="validator.must">
        <Select v-model="entSupForm.domownertype " placeholder="请选择住所产权类型" >
          <Option value="1">有房产证</Option>
          <Option value="2">无房产证</Option>
        </Select>
      </FormItem>
      <FormItem class="baseinfo_select" label="住所提供方式" :label-width="140" prop='domproright' :rules="validator.must">
        <Select v-model="entSupForm.domproright " placeholder="请选择住所提供方式" >
          <Option v-for="(item,index) in domprorightList" :value="item.value" :key="index">{{item.text}}</Option>
        </Select>
      </FormItem>
      <FormItem class="rightSpan" label="营业面积" :label-width="140" prop='domacreage' :rules="validator.area" >
        <Input v-model="entSupForm.domacreage" type="text" :maxlength="11"></Input>
        <span>平方米</span>
      </FormItem>
      <div class="baseinfo_space"></div>
      <FormItem class="rightSpan" style="border-top: 1px solid #BFE5F5;" label="住所使用期限" :label-width="140" prop='domyears' :rules="validator.int" >
        <Input v-model="entSupForm.domyears" type="text" :maxlength="2"></Input>
        <span>年</span>
      </FormItem>
      <FormItem class="baseinfo_select" label="房屋用途" :label-width="140" prop='domusagetype' :rules="validator.must">
        <Select v-model="entSupForm.domusagetype " >
          <Option value="商用">商用</Option>
          <Option value="办公">办公</Option>
        </Select>
      </FormItem>
      <!-- <FormItem class="rightSpan" label="执照副本数" :label-width="150" prop='copyno' :rules="validator.int" >
        <Input v-model="entSupForm.copyno" type="text"  :maxlength="2"></Input>
        <span>份</span>
      </FormItem> -->
    </Form>
      
      <div class="baseinfo_bottom">
        <div class="bottom">
            <Button type="warning" @click="saveInfo(false)">保存</Button>
            <Button type="primary" @click="gotoNext(true)">下一步</Button>
        </div>
         <MyFooter />
    </div>
  </div>
</template>

<script>
import MyHeader from '../../components/MyHeader2.vue'
import MyFooter from '../../components/MyFooter.vue'
import request from '../../utils/request'
import dictutil from '../../assets/js/dictutil'
import validator from '../../utils/validatorUtil.js'
export default {
  data() {
    return {
      validator,
      dombase: '北京市',
      domprorightList: [],
      entForm: {},
      entSupForm: {}
    }
  },
  components: {
    MyHeader,
    MyFooter
  },
  methods: {
    domotherEdit() {
      this.entSupForm.prolocother = this.entForm.domother
    },
    getInfo() {
        request.get('/interface/apply/cp/setup/queryBasicInfo.do', {'gid': sessionStorage.getItem('gid')}
        ).then(response => {
          if (response.data.result === 'error') {
            this.$ErrorAlert(response.data.message)
            return null
          }
          // 成功逻辑
          this.entForm = response.data.data.entForm
          this.entSupForm = response.data.data.entSupForm
          this.entSupForm.domusagetype = this.entSupForm.domusagetype || '商用'
          debugger
        //   if (!this.entSupForm.copyno) {
        //     this.entSupForm.copyno = '1'
        //   } else {
        //     this.entForm.tradeterm = this.entForm.tradeterm.toString() || '-1'
        //   }
        })
    },
    getprolocother() {
      this.domprorightList = dictutil.getList('CA44')
    },
    save(isNext) {
       this.$router.push('/changeComScope');
    //    this.$refs['entForm'].validate((valid) => {
    //       if (valid) {
    //         this.$refs['entSupForm'].validate((valid) => {
    //           if (valid) {
    //             this.entForm.gid = sessionStorage.getItem('gid')
    //             this.entSupForm.gid = sessionStorage.getItem('gid')
    //             this.entForm.dom = this.dombase + this.entForm.domother
    //             this.entSupForm.proloc = this.dombase + this.entSupForm.prolocother
    //             let postData = new FormData()
    //             postData.append('entForm', JSON.stringify(this.entForm))
    //             postData.append('entSupForm', JSON.stringify(this.entSupForm))
    //             request.post('/interface/apply/cp/setup/saveBasicInfo.do', postData
    //               ).then(response => {
    //                 if (response.data.result === 'error') {
    //                   this.$ErrorAlert(response.data.message)
    //                 } else if (response.data.result === 'success') {
    //                   if (isNext) {
    //                     this.$router.push('/changeComScope')
    //                   } else {
    //                     this.$SuccessAlert('保存成功')
    //                   }
    //                 }
    //               })
    //           }
    //         })
    //       } else {
    //         this.$ErrorAlert('数据未填写完全，请注意红色标记')
    //       }
    //     })
    },
    saveInfo(isNext) {
      this.save(isNext)
    },
    gotoNext(isNext) {
      this.save(isNext)
    }
  },
  mounted() {
      this.dombase = '北京市' + dictutil.getText('bjCity', localStorage.getItem('regorg'))
      this.getInfo()
      this.getprolocother()
  }
}
</script>
<style>
.changeComName {
 padding:0.5rem;
}
.titleBg {font-size:0.57rem;padding:0.5rem;}
.mainBtn {
  height:1.75rem;font-size:0.64rem;
  margin-top:0.6rem;
}
.tbstyle {font-size:0.5rem;border-collapse: collapse;}
.tbstyle td {border:1px solid #BFE5F5;font-size:0.5rem;padding: 0.3rem;}
.tbstyle .tbstyle_left {background:#F5FAFD;color:#2D8CF0;white-space: nowrap}
.red {color:#c00;}
</style>

<style lang="scss">
.baseinfo {
  position: relative;
  min-height: 100%;
  &_space {
    height: 0.54rem;
  }
  &_form {
    .ivu-form-item {
      margin-bottom: 0;
      border-bottom: 1px solid #BFE5F5;
      label {
        height: 1.75rem;
        line-height: 1.75rem;
        padding: 0 0 0 0.3rem;
        font-size:0.5rem;
        background:#F5FAFD;color:#2D8CF0;
        border-right: 1px solid #BFE5F5;
      }
      input {
        height: 1.75rem;
        border: none;
        padding-left:0.5rem;
        font-size: 0.5rem;
        border-radius: 0;
        &:hover {
          border: none;
        }
        &:focus {
          border: none;
          box-shadow: none;
        }
        &::-webkit-input-placeholder {
          text-align: right;
        }
        &::-moz-placeholder {
          text-align: right;
        }
        &:-ms-input-placeholder {
          text-align: right;
        }
      }
    }
  }
  &_select {
    .ivu-form-item-content {
      padding-left: 0.5rem;
      .ivu-select-selection {
        border: none;
        box-shadow: none;
        height: 100%;
        .ivu-select-selected-value {
          height: 1.75rem;
          line-height: 1.75rem;
          font-size: 0.5rem;
          padding-left: 0;
        }
        .ivu-select-placeholder {
          height: 1.75rem;
          line-height: 1.75rem;
          font-size: 0.5rem;
          padding-left: 0;
        }
      }
    }
  }
  &_bottom {
    padding:0.5rem;
  }
  .bottom {
    display: flex;
    justify-content: space-around;
    // padding: 0.54rem;
    button {
      width: 45%;
      padding-top: 0.36rem;
      padding-bottom: 0.36rem;
      font-size: 0.57rem;
    }
  }
  .rightSpan{
    width: 100%;
    .ivu-input-wrapper{
      width: 80%;
      float: left;
    }
    span{
      width: 20%;
      float: right;
      line-height: 1.75rem;
      text-align: right;
    }
  }
}
</style>

